<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<link rel="stylesheet" type="text/css" href="/myfirstweb/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="/myfirstweb/css/font-awesome-4.5.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="/myfirstweb/style.css">
	<script type='text/javascript' src='/myfirstweb/js/jquery-1.8.3.min.js'></script>
	<script type='text/javascript' src='/myfirstweb/js/bootstrap.min.js'></script>
	<script>
		$(document).ready(function(){
			var _this=this;
			var menuTop={{$.menuTop}};
			var menuLeft={{$.menuLeft}};
			var h=$(".pageHead").innerHeight()+$(".pageFoot").innerHeight()+3;
			$(".pageBody").css("height",window.innerHeight-h);
			$("#msg").click(function(){
				alert("查看消息");
			});
			$("#userinfo").click(function(){
				alert("查看用户信息")
			});
			_this.initMenuTop=function(){
				var ul =$(".menuTop-ul");
				$(ul).empty();
				$.each(menuTop,function(k,v){
					var li=$("<li data-id='"+v.menuid+"'>"+v.menuname+"</li>");
					$(li).click(_this.initMenuLeft);
					ul.append(li)
				});
			};
			_this.initMenuLeft=function(e){
				$(e.currentTarget.parentElement.children).removeClass("menuClick")
				$(e.currentTarget).addClass("menuClick")
				var pid=$(e.currentTarget).attr("data-id");
				var ul=$(".pageLeft-ul");
				$(ul).empty();
				$.each(menuLeft,function(k,v){
					if(v.parentmenuid==pid){
						var li=$("<li data-id='"+v.menuid+"' data-url='"+v.url+"'>"+v.menuname+"</li>");
						$(li).click(_this.link);
						ul.append(li)
					}
				})
				$(".pageLeft-ul").children().first().click();
			};
			_this.link=function(e){
				$(e.currentTarget.parentElement.children).removeClass("menuClick")
				$(e.currentTarget).addClass("menuClick")
				$("#mainFrame").attr("src",$(e.currentTarget).attr("data-url"));
			}
			_this.initMenuTop();
			$(".menuTop-ul").children().first().click();
			$(".pageLeft-ul").children().first().click();
		})
	</script>
  </head>
  <body>
  		<div>
			<div class="pageHead">
				<div class="pageTitle">
					<i class="fa fa-paper-plane-o fa-2x" style="color:#85acf1"></i>
					<a style="color: #85acf1; font-size: 31px;text-decoration: none;">梦</a>
					<a style="color: #85acf1;text-decoration: none;">无限</a>
				</div>
				<div class="menuTop">
					<ul class="menuTop-ul"></ul>
				</div>
				<div class="utilTop">
					<ul class="utilTop-ul">
					   <li><i id="msg" class="fa fa-commenting fa-2x"><span class="badge" style="margin-top: -15px;">42</span></i></li>
					   <li><i id="userinfo" class="fa fa-male fa-2x"></i></li>
					</ul>
				</div>
				<div style="clear:both"></div>
			</div>
			<div class="pageBody pageLeft">
				<ul class="pageLeft-ul"></ul>
			</div>
			<div class="pageBody pageRight">
				<iframe id="mainFrame" style="height:100%;width:100%;padding: 5px;scroll:auto;"></iframe>
			</div>
			<div style="clear:both"></div>
			<div class="pageFoot"></div>
		</div>
  </body>
</html>